Day15 語法改革！零基礎新手也能讀懂的JS - querySelector與getElementByXX - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 15

自我挑戰組

語法改革！零基礎新手也能讀懂的JS！系列第 15 篇

Day15 語法改革！零基礎新手也能讀懂的JS - querySelector與getElementByXX

12th鐵人賽

CK_Yang

2020-09-30 22:37:17

960 瀏覽

分享至

既然我們介紹了DOM接下來就可以開始介紹一些常用的API與解析之間的差別了

既然DOM已經提供了節點給我們使用讓我們能夠控制這些節點，但我們到底該怎麼選取到我們要的節點呢?

在JS裡我們有兩大API可以選取到節點

document.querySelector()
document.querySelectorAll() (一次選取多個節點)
document.getElementByXX()
document.getElementsByXX() (有加s表示可以一次選多個節點)

`document.querySelector()`

節點的選取最簡易的方式就是透過class OR id

所以如果在以下的html結構想要選取到ul可以這麼寫

<body>
  <div>
    <ul class="ck" id="ckck">
      <li>
        123
      </li>
    </ul>
  </div>
</body>

let ck1 = document.querySelector('.ck')
let ck2 = document.querySelector('#ckck')

如果使用querySelector的話要注意小括號裡頭的元素如果是class記得在前面加.，id的話要加#，其實可以想像就是跟css選到標籤的方式一樣!

`document.querySelectorAll()`

如果在一個頁面有多個相同class的標籤想要都對他們進行控制就可以使用querySelectorAll

<body>
  <div>
    <ul>
      <li class="ck">123</li>
      <li class="ck">456</li>
      <li class="ck">789</li>
    </ul>
  </div>
</body>

可以透過forEach方法或是for迴圈取得每個節點

let ck = document.querySelectorAll('.ck')
ck.forEach(function(e){
  console.log(e) //印出每個節點
})

`document.getElementByXX`

getElementByXX 分的很細，其中有getElementById、getElementsByTagName、getElementsByClassName、getElementsByName。

其實就是對應他名字最後來看要使用哪一個，如果想要使用id來選取到某標籤就可以使用getElementById

let ck = document.getElementById('ck')

如果要使用class來選擇標籤

let ck1 = document.getElementsByClassName('ck1')

兩者之間的差別

document.getElementById 跟 document.querySelector其實都只會拿到一個節點所以沒有什麼差別。

document.getElementsByXX 與 querySelectorAll回傳的是一個「NodeList」與「HTMLCollection」，這兩個東西看似像陣列但它並不是個陣列，他沒有陣列的一些屬性可以使用，但可以透過陣列的索引來存取資料。而照理來說這兩個東西都會即時更新。但有陷阱，只要是querySelector、querySelectorAll取得的NodeList都是靜態的。什麼意思呢?我們舉個例子看看

<div id="out" class="oo">
  <div class="ck"></div>
  <div class="ck"></div>
  <div class="ck"></div>
  <div class="ck"></div>
</div>

var div = document.getElementsByTagName('div')
var out = document.getElementById('out')
console.log(div.length) //印出 5
out.innerHTML = '' //清空裡面的DIV
console.log(div.length)//印出 1

以上述來看，只要清空掉裡面的div後就會讓div的長度更新為1，那如果是靜態的呢?

<div id="out" class="oo">
  <div class="ck"></div>
  <div class="ck"></div>
  <div class="ck"></div>
  <div class="ck"></div>
</div>

var div = document.querySelectorAll('div')
var out = document.querySelector('#out')
console.log(div.length)//印出 5
out.innerHTML = ''//清空裡面的DIV
console.log(div.length)//印出 5

實際測試後會發現不管清空了沒，最後都還是不會影響最原本的結果，這就是靜態。

所以這兩者在使用上雖然看似差不多，但實際上還是有一些小差別!大概是這樣子
，今天就講解到這邊，謝謝大家。